<template>
    <view class="flex flex-column">
        <!-- 轮播图 -->
        <view class="swiper-container">
            <u-swiper :list="list2" duration="1000" height="200px"></u-swiper>
            <!-- 搜索框 -->
            <view class="search-container">
                <input 
                    v-model="keyword" 
                    placeholder="活动名/景点/城市" 
                    @confirm="searchActivities" 
                    @input="handleInputChange"
                />
            </view>
        </view>
        <!-- 活动列表 -->
        <view class="activity-list" style="margin-top:35px;">
            <view class="activity-row" v-for="(row, index) in activityRows" :key="index">
                <view class="activity-card" v-for="activity in row" :key="activity.activityId" @click="goToActivityDetail(activity.activityId)">
                    <!-- 活动图片 -->
                    <image class="activity-image" :src="activity.activtyImage" mode="aspectFill"></image>
                    <!-- 活动名称 -->
                    <view class="activity-title">{{ activity.activityTitle }}</view>
                    <!-- 活动价格 -->
                    <view class="activity-price">￥{{ activity.activtyPrice }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list2: [
                "https://images.pexels.com/photos/869258/pexels-photo-869258.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
                "https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg?auto=compress&cs=tinysrgb&w=600",
                "https://images.pexels.com/photos/627654/pexels-photo-627654.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load",
                "https://images.pexels.com/photos/113338/pexels-photo-113338.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
                "https://images.pexels.com/photos/804565/pexels-photo-804565.jpeg?auto=compress&cs=tinysrgb&w=600",
            ],
            userId: null,
            keyword: '',
            activities: [], // 存储所有活动数据
            activityRows: [] // 存储按行分组的活动数据
        };
    },
    onLoad() {
        this.userId = uni.getStorageSync('userInfo')?.userId || null;
        this.fetchActivities();
    },
    methods: {
        // 获取所有活动数据
        fetchActivities() {
            uni.request({
                url: 'http://localhost:8090/activity',
                method: 'GET',
                success: (res) => {
                    if (res.data.code === 200) {
                        this.activities = res.data.data;
                        this.groupActivitiesByRow();
                    }
                },
                fail: (err) => {
                    console.error('获取活动数据失败:', err);
                }
            });
        },
        // 将活动数据按每行两条进行分组
        groupActivitiesByRow() {
            this.activityRows = [];
            for (let i = 0; i < this.activities.length; i += 2) {
                this.activityRows.push(this.activities.slice(i, i + 2));
            }
        },
        // 跳转到活动详情页
        goToActivityDetail(activityId) {
            // 根据活动id跳转并携带活动id
            uni.navigateTo({
                url: `/pages/index/activityDetail/activityDetail?activityId=${activityId}`
            });
        },
        // 搜索活动
        searchActivities() {
            uni.request({
                url: 'http://localhost:8090/activity/search',
                method: 'POST',
                data: {
                    activityTitle: this.keyword,
                },
                success: (res) => {
                    if (res.data.code === 200) {
                        this.activities = res.data.data;
                        this.groupActivitiesByRow();
                    } else {
                        console.error('搜索失败:', res.data.message);
                    }
                },
                fail: (err) => {
                    console.error('搜索请求失败:', err);
                }
            });
        },
        // 处理输入框输入变化
        handleInputChange() {
            if (this.keyword === '') {
                this.fetchActivities();
            }
        }
    }
};
</script>

<style>
.fix-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
}

.swiper-container {
    position: relative;
}

.search-container {
    position: absolute;
    bottom: -15px;
    left: 10px;
    right: 10px;
    background-color: white;
    border-radius: 20px;
    padding: 5px 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.search-container input {
    width: 100%;
    padding: 5px;
    border: none;
    background-color: transparent;
    outline: none;
}

.activity-list {
    padding: 10px;
}

.activity-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.activity-card {
    width: calc(50% - 5px);
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.activity-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.activity-title {
    font-size: 16px;
    font-weight: bold;
    padding: 5px 10px;
    margin-bottom: 2px;
}

.activity-price {
    font-size: 14px;
    color: #666;
    padding: 0 10px 10px;
}
</style>